<script setup lang="ts">
import {CrowdLabelInterface} from "~/contentScripts/views/wxt/BatchAddingProducts/components/Crowd/CrowdInterface";
import {WxtBizCode} from "~/contentScripts/views/wxt/lib/wxtUtils";

const props = defineProps({
  value: {
    type: Boolean,
    default: false,
  },
  bizCode: {
    type: String as PropType<WxtBizCode>,
    default: WxtBizCode.关键字推广,
  },
  materialIdList: {
    type: Array as PropType<string[]>,
    default: () => [],
  },
  campaignId: {
    type: Array as PropType<string[]>,
    default: () => [],
  },
  optionGroupList: {
    type: Array,
    default: () => [],
  },
});
const emit = defineEmits([
  "update:value",
]);
const data = ref<any[]>(props.optionGroupList.map((item: any) => {
  return {
    ...item,
    selected: false,
    indeterminate: false,
    value: [],
    // 是否合并
    merge: false,
  }
}));
watch(() => props.optionGroupList, (val) => {
  data.value = val.map((item: any) => {
    return {
      ...item,
      selected: false,
      indeterminate: false,
      value: [],
      // 是否合并
      merge: false,
    }
  });
}, {deep: true});
const toggleSelectAll = (groupIndex: number,index:number) => {
  const optionGroup = data.value[groupIndex].optionGroupList[index];
  console.log(optionGroup);
  optionGroup.selected = !optionGroup.selected;
  if (optionGroup.selected){
    optionGroup.indeterminate = false;
    optionGroup.value = optionGroup.optionList.map((item: any) => item.optionValue);
  }
  else {
    optionGroup.value = [];
  }
  console.log(optionGroup);
  data.value[groupIndex].optionGroupList[index] = optionGroup;
};
const onChange = ()=>{
  // 如果选中的数量等于总数，那么全选
  data.value.forEach((item: any) => {
    item.optionGroupList.forEach((optionGroup: any) => {
      if (typeof optionGroup.value === 'undefined') {
        optionGroup.value = [];
      }
      if (optionGroup.value.length === optionGroup.optionList.length) {
        optionGroup.selected = true;
        optionGroup.indeterminate = false;
      } else if (optionGroup.value.length === 0) {
        optionGroup.selected = false;
        optionGroup.indeterminate = false;
      } else {
        optionGroup.selected = false;
        optionGroup.indeterminate = true;
      }
    });
  });
}
watch(() => data.value, (val) => {
  let selected:CrowdLabelInterface[] = [];
  val.forEach((item: any) => {
    item.optionGroupList.forEach((optionGroup: any) => {
      console.log(optionGroup.value);
      if (optionGroup.merge) {  // 合并
        // 已选中的option
        const selectedOptions = optionGroup.optionList.filter((option: any) => (optionGroup.value||[]).includes(option.optionValue));
        if (selectedOptions.length){
          selected.push({
            ...optionGroup,
            optionList: selectedOptions,
            labelId: item.labelId,
            labelName: item.labelName,
            targetType:item.targetType,
          })
        }
      }
      else {
        const selectedOptions = optionGroup.optionList.filter((option: any) => (optionGroup.value||[]).includes(option.optionValue));
        selectedOptions.forEach((option: any) => {
          selected.push({
            ...optionGroup,
            optionList: [option],
            labelId: item.labelId,
            labelName: item.labelName,
            targetType:item.targetType,
          });
        });
      }
    });
  });
  console.log(selected);
  emit('update:value', selected);
}, {
  deep: true,
});
</script>

<template>
  <!--  antdv 的 checkbox 组件-->
  <div v-for="(item,groupIndex) in data">
    <!--    // 合并开关和全选开关-->
    <div v-for="(optionGroup,index) in item.optionGroupList">
      <div>
        <a-space>

          <span style="font-weight: bold;">{{ optionGroup.optionGroupName }}</span>
          <a-switch v-model:checked="optionGroup.merge" checked-children="合并" un-checked-children="展开" size="small"/>
          <a-checkbox
              :indeterminate="optionGroup.indeterminate"
              :checked="optionGroup.selected"
              @change="toggleSelectAll(groupIndex,index)"
          >
            全选
          </a-checkbox>
        </a-space>
      </div>
      <a-divider style="margin: 10px 0;"/>
      <a-checkbox-group v-model:value="optionGroup.value" @change="onChange"  style="margin-bottom: 20px;">
        <a-checkbox
            v-for="(option, index) in optionGroup.optionList"
            :key="option.optionValue"
            :value="option.optionValue"
        >
          {{ option.optionName }}
        </a-checkbox>
      </a-checkbox-group>
    </div>

  </div>
</template>

<style scoped>

</style>
